/**
 * @功能描述: 基础头像样式组件
 * @author: lzn
 * @date: 2022-09-21 19:07:06
 * @version: 1.0
 */
@import '../../style/index';

// 定义头像尺寸
@mixin avatar-size($size, $font) {
  width: $size;
  height: $size;
  line-height: $size;
  font-size: $font;
}

// 头像定位相关
@mixin avatar--layout {
  position: relative;
  display: inline-block;
  overflow: hidden;
  text-align: center;
  vertical-align: middle;
}

// 头像样式相关
@include b(base-avatar) {
  @include avatar--layout;
  color: $color-white;
  background: $avatar-background-color;
  white-space: nowrap;
  border-radius: 50%;
  @include avatar-size($avatar-size, $avatar-font);
  // 定义大尺寸
  &.avatar-lg {
    @include avatar-size($avatar-size-lg, $avatar-font-lg);
  }
  // 定义小尺寸
  &.avatar-sm {
    @include avatar-size($avatar-size-sm, $avatar-font-sm);
  }
  // 矩形头像 
  &.avatar-square {
    border-radius: $border-radius-base;
  }
  // image头像样式
  &.avatar-image {
    background: transparent;
    >img {
      display: block;
      width: 100%;
      height: 100%;
      -o-object-fit: cover;
      object-fit: cover;
    }
  }
  // 字体头像样式
  .avatar-string {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    font-size: $font-size-base;
  }
}